<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/rec";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="author" content="pixelcave">
	<meta name="robots" content="noindex, nofollow">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>ZZblog-我的博客</title>
		<!-- Icons -->
	<!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
	<link rel="shortcut icon" href="<%= filePath %>/lexyui/img/favicons/favicon.png">
	
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-96x96.png" sizes="96x96">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-160x160.png" sizes="160x160">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-192x192.png" sizes="192x192">
	
	<link rel="apple-touch-icon" sizes="57x57" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-180x180.png">
	<!-- END Icons -->
	
	<!-- Stylesheets -->
	<!-- Web fonts -->
	<!-- 
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700%7COpen+Sans:300,400,400italic,600,700">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700%7COpen+Sans:300,400,400italic,600,700">
	 -->	
	
	<!-- Bootstrap and OneUI CSS framework -->
	<link rel="stylesheet" href="<%=filePath %>/lexyui/assets/css/bootstrap.min.css">
	<link rel="stylesheet" id="css-main" href="<%=filePath %>/lexyui/assets/css/oneui.css">
    <%-- <link rel="stylesheet" type="text/css" href="<%=filePath %>/plugs/webuploader/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="<%=filePath %>/plugs/webuploader/css/style.css" /> --%>
    
    
    <style type="text/css">
    .select-icon{cursor: pointer;}
    .items{cursor: pointer;}
    .items:hover{
    	z-index:9999;
    	background-color: blue;
    }
    .mb{padding: 5px;}
    div.dataTables_filter {
	    text-align: right;
	}
	
	#user-menu .active {
		background: #fff;
	    height: 46px;
	    line-height: 46px;
	    border-top: 2px solid #8d8d8d;
	}
   
	
    </style>
	<!-- Page JS Plugins CSS -->
	<link rel="stylesheet" href="<%=filePath %>/lexyui/assets/js/plugins/datatables/jquery.dataTables.min.css">
 
 
 
 </head>
<body>
		<div id="page-container" class="sidebar-l sidebar-mini sidebar-o side-scroll header-navbar-fixed">
            
            <!-- Menu -->
            <jsp:include page="rec_menu.jsp"></jsp:include>
            <!-- END Menu -->
            
            <!-- Header -->
			<jsp:include page="rec_fixed_top.jsp"></jsp:include>
			<!-- END Header -->

            <!-- Main Container -->
            <main id="main-container">
                <!-- Page Content -->
                <div class="content content-boxed">
                    <!-- User Header -->
                    <div class="block">
                        <!-- Basic Info -->
                        <div class="bg-image" style="background-image: url('assets/img/photos/photo6@2x.jpg');">
                            <div class="block-content bg-primary-dark-op text-center overflow-hidden">
                                <div class="push-30-t push animated fadeInDown">
                                    <img class="img-avatar img-avatar96 img-avatar-thumb" src="assets/img/avatars/avatar4.jpg" alt="">
                                </div>
                                <div class="push-30 animated fadeInUp">
                                    <h2 class="h4 font-w600 text-white push-5">Sara Holland</h2>
                                    <h3 class="h5 text-gray">Web Designer</h3>
                                </div>
                            </div>
                        </div>
                        <!-- END Basic Info -->

                        <!-- Stats -->
                        <div class="block-content text-center">
                            <div class="row items-push text-uppercase">
                                <div class="col-xs-6 col-sm-3">
                                    <div class="font-w700 text-gray-darker animated fadeIn">我的博客</div>
                                    <a class="h2 font-w300 text-primary animated flipInX" href="javascript:void(0)">22000</a>
                                </div>
                                <div class="col-xs-6 col-sm-3">
                                    <div class="font-w700 text-gray-darker animated fadeIn">我的图库</div>
                                    <a class="h2 font-w300 text-primary animated flipInX" href="javascript:void(0)">16</a>
                                </div>
                                <div class="col-xs-6 col-sm-3">
                                	<div  >
                                    <div class="font-w700 text-gray-darker animated fadeIn">我的标签</div>
                                    <a class="h2 font-w300 text-primary animated flipInX select-icon" data-toggle="layout" data-action="side_overlay_toggle" >2600</a>
                                	</div>
                                </div>
                                <div class="col-xs-6 col-sm-3">
                                    <div class="font-w700 text-gray-darker animated fadeIn">设置</div>
                                    <div class="text-warning push-10-t animated flipInX">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- END Stats -->
                    </div>
                    <!-- END User Header -->

                    <!-- Main Content -->
                    <form action="pages_profile_edit.html" method="post" onsubmit="return false;">
                        <div class="block">
                            <ul id="user-menu" class="nav nav-tabs nav-justified" data-toggle="tabs">
                                <li class="active">
                                    <a href="#tab-profile-personal"><i class="fa fa-fw fa-pencil"></i> 我的博客</a>
                                </li>
                                <li class="">
                                    <a href="#tab-profile-password"><i class="fa fa-fw fa-asterisk"></i> 我的图库</a>
                                </li>
                                <li>
                                    <a href="#tab-profile-privacy"><i class="fa fa-fw fa-lock"></i> 私密设置</a>
                                </li>
                            </ul>
                            <div class="block-content tab-content" style="padding-top: 0px;">
                                <!-- Personal Tab -->
                                <div class="tab-pane fade active in" id="tab-profile-personal">
                                    <div class="row items-push"> <!--   -->
									     <!-- Dynamic Table Full Pagination -->
									     <div class="block">
									         <div class="block-content ">
									             <!-- DataTables init on table by adding .js-dataTable-full-pagination class, functionality initialized in js/pages/base_tables_datatables.js -->
									             <table id="blog-list" class="table table-bordered table-striped js-dataTable-full-pagination ">
									                 <thead>
									                     <tr>
									                         <!-- <th class="text-center" style="width: 5%;"></th> -->
									                         <th style="width: 45%;">标题</th>
									                         <th class="hidden-xs" style="width: 15%;">类型</th>
									                         <th class="hidden-xs" style="width: 15%;">作者</th>
									                         <th class="hidden-xs text-center" style="width: 15%;">查看/评论</th>
									                         <th class="text-center" style="width: 15%;">操作</th>
									                     </tr>
									                 </thead>
									             </table>
									         </div>
									     </div>
									     <!-- END Dynamic Table Full Pagination -->
                                    </div>
                                </div>
                                <!-- END Personal Tab -->

                                <!-- Password Tab -->
                                <div class="tab-pane fade " id="tab-profile-password">
                                    <div class="row items-push">
                                        <!-- Main Content -->
					                    <div class="row">
					                            <!-- Timeline -->
					                            <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb">
						                                    <div>
						                                    	<div id ="add-mb" class="items" data-toggle="modal"  onclick="fileUploadModal()" > <!-- data-target="#modal-signup-terms" -->
							                                    	<img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/add.png" alt="">
						                                    	</div>
						                                    </div>
						                                </div>
						                            </div>
						                        </div>
						                        <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb">
						                                	<div class="items">
						                                    	<img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/123.jpg" alt="">
						                                	</div>
						                                </div>
						                            </div>
						                        </div>
						                        <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb">
						                                    <img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/123.jpg" alt="">
						                                </div>
						                            </div>
						                        </div>
						                        <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb">
						                                    <img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/000.jpg" alt="">
						                                </div>
						                            </div>
						                        </div>
						                        <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb" >
						                                    <img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/123.jpg" alt="">
						                                </div>
						                            </div>
						                        </div>
						                        <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb">
						                                     <img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/123.jpg" alt="">
						                                </div>
						                            </div>
						                        </div>
						                        <div class="col-sm-2 ">
						                            <div class="block" id="my-block">
						                                <div class="block-content mb">
						                                     <img class="img-responsive" src="<%=filePath %>/lexyui/assets/img/123.jpg" alt="">
						                                </div>
						                            </div>
						                        </div>
					                    </div>
					                    <!-- END Main Content -->
                                    </div>
                                </div>
                                <!-- END Password Tab -->

                                <!-- Privacy Tab -->
                                <div class="tab-pane fade" id="tab-profile-privacy">
                                    <div class="row items-push">
                                        <div class="col-sm-6 col-sm-offset-3 form-horizontal">
                                            <div class="form-group">
                                                <div class="col-xs-8">
                                                    <div class="font-s13 font-w600">Online Status</div>
                                                    <div class="font-s13 font-w400 text-muted">Show your status to all</div>
                                                </div>
                                                <div class="col-xs-4 text-right">
                                                    <label class="css-input switch switch-sm switch-primary push-10-t">
                                                        <input type="checkbox"><span></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="form-group">
                                                <div class="col-xs-8">
                                                    <div class="font-s13 font-w600">Auto Updates</div>
                                                    <div class="font-s13 font-w400 text-muted">Keep up to date</div>
                                                </div>
                                                <div class="col-xs-4 text-right">
                                                    <label class="css-input switch switch-sm switch-primary push-10-t">
                                                        <input type="checkbox"><span></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="form-group">
                                                <div class="col-xs-8">
                                                    <div class="font-s13 font-w600">Notifications</div>
                                                    <div class="font-s13 font-w400 text-muted">Do you need them?</div>
                                                </div>
                                                <div class="col-xs-4 text-right">
                                                    <label class="css-input switch switch-sm switch-primary push-10-t">
                                                        <input type="checkbox" checked=""><span></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="form-group">
                                                <div class="col-sm-8">
                                                    <div class="font-s13 font-w600">API Access</div>
                                                    <div class="font-s13 font-w400 text-muted">Enable/Disable access</div>
                                                </div>
                                                <div class="col-sm-4 text-right">
                                                    <label class="css-input switch switch-sm switch-primary push-10-t">
                                                        <input type="checkbox" checked=""><span></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="block-content block-content-full bg-gray-lighter text-center" style="background-color: white">
				                                <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-check push-5-r"></i> Save Changes</button>
				                                <button class="btn btn-sm btn-warning" type="reset"><i class="fa fa-refresh push-5-r"></i> Reset</button>
				                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- END Privacy Tab -->
                            </div>
                        </div>
                    </form>
                    <!-- END Main Content -->
                </div>
                <!-- END Page Content -->
                
                <!-- Terms Modal -->
				<div class="modal fade" id="modal-signup-terms" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-dialog   modal-lg modal-dialog-popout " >
						<div class="modal-content">
							<!-- <div class="block block-themed block-transparent remove-margin-b">
								<div class="block-header bg-primary-dark">
									<ul class="block-options">
										<li>
											<button data-dismiss="modal" type="button">
												<i class="si si-close"></i>
											</button>
										</li>
									</ul>
									<h3 class="block-title">Terms &amp; Conditions</h3></div>
								<div class="block-content" id="tt">
									
								</div>
							</div> -->
							<!-- <div class="modal-footer">
								<button class="btn btn-sm btn-default" type="button" data-dismiss="modal">Close</button>
								<button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">
									<i class="fa fa-check"></i>I agree</button>
							</div> -->
						</div>
					</div>
				</div>
				<!-- END Terms Modal -->
                
                
            </main>
            <!-- END Main Container -->
        
        <!-- Footer -->
        <footer id="page-footer" class="bg-white">
        	<jsp:include page="rec_page_footer.jsp"></jsp:include>
        </footer>

        <!-- Apps Modal -->
        <!-- Opens from the button in the header -->
        <div class="modal fade" id="apps-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-sm modal-dialog modal-dialog-top">
                <div class="modal-content">
                    <!-- Apps Block -->
                    <div class="block block-themed block-transparent">
                        <div class="block-header bg-primary-dark">
                            <ul class="block-options">
                                <li>
                                    <button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
                                </li>
                            </ul>
                            <h3 class="block-title">Apps</h3>
                        </div>
                        <div class="block-content">
                            <div class="row text-center">
                                <div class="col-xs-6">
                                    <a class="block block-rounded" href="base_pages_dashboard.html">
                                        <div class="block-content text-white bg-default">
                                            <i class="si si-speedometer fa-2x"></i>
                                            <div class="font-w600 push-15-t push-15">Backend</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a class="block block-rounded" href="frontend_home.html">
                                        <div class="block-content text-white bg-modern">
                                            <i class="si si-rocket fa-2x"></i>
                                            <div class="font-w600 push-15-t push-15">Frontend</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END Apps Block -->
                </div>
                
            </div>
            </div>
        </div>
		<!-- OneUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock, Appear, CountTo, Placeholder, Cookie and App.js -->
        <script src="<%=filePath %>/lexyui/assets/js/core/jquery.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/bootstrap.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/jquery.slimscroll.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/jquery.scrollLock.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/jquery.appear.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/jquery.countTo.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/jquery.placeholder.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/core/js.cookie.min.js"></script>
        <script src="<%=filePath %>/lexyui/assets/js/app.js"></script>
        
        
        
        <!-- Page JS Plugins -->
		<script src="<%=filePath %>/lexyui/assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
		<!-- Page JS Code -->
		<%-- <script src="<%=filePath %>/lexyui/assets/js/pages/base_tables_datatables.js"></script> --%>
        
        
        <%-- <script type="text/javascript" src="<%=filePath %>/plugs/webuploader/js/webuploader.js"></script>
    	<script type="text/javascript" src="<%=filePath %>/plugs/webuploader/js/upload.js"></script> --%>
    	<script type="text/javascript">
    	
    		
    		
    		$(function(){
    			
    			$('#modal-signup-terms').on('shown.bs.modal', function () {
    				uploader.refresh();
   				})
   				$("#add-mb").click(function(){
	   				$("#modal-signup-terms").modal({
	                     remote: "toUploadJsp"
	                });
   				})
   				$("#modal-signup-terms").on("hidden.bs.modal", function() {
   			        $(this).removeData("bs.modal");
   			    });
    			
    			
    			$('#blog-list').dataTable({             
    		       // "lengthChange": false,
    		        "searching": true,
    		       // "ordering": true,
    		        //"info": true,
    		       // "autoWidth": false,
    		        "pageLength": 10,
    		        "processing": true,
    		        "serverSide": true,
    		        "bPaginate": true, //翻页功能
    		        "bAutoWidth" : true,//自动宽度
    		        "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列 
    		        "ajax": {
    		            "url": "user/myblogpage",
    		            "type":"POST"
    		        },
    		        "columns": [
    		            //{ "data": "serial_id" }, hidden-xs
    		             //{ "data": "blog_title" },
    		             {
    		                 //"sClass": "text-center",
    		                 "data": "blog_title",
    		                 "render": function (data, type, full, meta) {
    		                	 return '<a target="_blank" href="blog/getblogcontentinfo?serialId='+full.serial_id+'" > '+data+' </a>';
    		                 },
    		                 "bSortable": false
    		             }, 
    		             
    		             // { "data": "type_no" },
    		             {
    		                 "sClass": "hidden-xs",
    		                 "data": "type_name",
    		             },
    		             // { "data": "update_user_name" },
    		             {
    		                 "sClass": "hidden-xs",
    		                 "data": "update_user_name",
    		             }, 
    		             // { "data": "click_num" },
    		             {
    		                 "sClass": "hidden-xs",
    		                 "data": "click_num",
    		             }, 
    		             {
    		                 "sClass": "text-center hidden-xs",
    		                 "data": "ID",
    		                 "render": function (data, type, full, meta) {
    		                     return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
    		                 },
    		                 "bSortable": false
    		             }, 
    		             
    		        ],
    		        "oLanguage" : {//语言设置  
                        "sProcessing" : "处理中...",  
                        "sLengthMenu" : "显示 _MENU_ 项结果",  
                        "sZeroRecords" : "没有匹配结果",  
                        "sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",  
                        "sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",  
                        "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",  
                        "sInfoPostFix" : "",  
                        "sSearch" : "搜索:",  
                        "sUrl" : "",  
                        "sEmptyTable" : "表中数据为空",  
                        "sLoadingRecords" : "载入中...",  
                        "sInfoThousands" : ",",  
                        "oPaginate" : {  
                            "sFirst" : "首页",  
                            "sPrevious" : "上页",  
                            "sNext" : "下页",  
                            "sLast" : "末页"  
                        },  
                        "oAria" : {  
                            "sSortAscending" : ": 以升序排列此列",  
                            "sSortDescending" : ": 以降序排列此列"  
                        }  
                    }  
    		    })
    		})
    		
    		function fileUpload(serialId){
       			$.ajaxFileUpload({  
	                url:'fileUpload',  
	                secureuri:false,  
	                fileElementId:'fileToUpload',//file标签的id  
	
	                dataType: 'json',//返回数据的类型  
	
	                data:{'serialId':serialId},//一同上传的数据  
	
	                success: function (data, status) {  
	                    //把图片替换  
	
	                     alert(data);
	                },  
	                error: function (data, status, e) {  
	                    alert(e);  
	                }  
            	})  
    		};
        	
        
    		
    	</script>
    	
</body>
</html>